<template>
  <div>
    <div class="head">
      <a-input
        v-model:value="search"
        placeholder="请输入账号"
        class="head-search"
      ></a-input>
      <a-button @click="searchData">搜索</a-button>
      <a-button @click="add" type="primary" class="add">
        <template #icon>
          <PlusOutlined />
        </template>
        创建账号
      </a-button>
    </div>
    <div>
      <a-table :columns="columns" :dataSource="dataSource">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-button class="ant-link" @click="delUserBtn(record)"> 删除 </a-button>
          </template>
        </template>
      </a-table>
    </div>

    <a-modal
      title="添加账号"
      v-model:open="open"
      @ok="handelOk"
      @cancel="handleCancel"
      ok-text="确认"
      cancel-text="取消"
      centered
    >
      <a-form :model="addForm">
        <a-form-item
          label="姓名"
          name="username"
          :rules="[{ required: true, message: '请输入姓名!' }]"
        >
          <a-input v-model:value="addForm.username" />
        </a-form-item>

        <a-form-item
          label="密码"
          name="password"
          :rules="[{ required: true, message: '请输入密码!' }]"
        >
          <a-input v-model:value="addForm.password" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { onBeforeMount, onMounted, ref } from "vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import { getInfoList, addUser, delUser } from "@/api/user";
import { Modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { createVNode } from 'vue';

const search = ref("");
const page = ref({
  pageNo: 1,
  pageSize: 10,
});

const open = ref(false);

const columns = [
  {
    title: "用户名称",
    dataIndex: "username",
    key: "username",
  },
  {
    title: "第一次登录时间",
    key: "firstLoginTime",
    dataIndex: "firstLoginTime",
  },
  {
    title: "最后一次登录时间",
    dataIndex: "latestLoginTime",
    key: "latestLoginTime",
  },
  {
    title: "操作",
    key: "action",
    dataIndex: "action",
  },
];
const dataSource = ref([])

    
const addForm = ref({
  username: "",
  password: "",
});

const searchData = () => {};

const add = () => {
  open.value = true;
};

const handelOk = () => {
  addUser(addForm.value).then(res => {
    console.log('添加', res.data);
    getList()
    handleCancel();
  })
};

const handleCancel = () => {
  open.value = false;
  addForm.value = {
    username: "",
    password: "",
  };
};

const getList = async () => {
  const res = await getInfoList(page.value)
  // .then((res) => {
    console.log("res", res.data.list);
    dataSource.value = res.data.list;
    page.value.pageNo = 1;

  // });
  console.log('datalist', dataSource.value)
};

const delUserBtn = (value) => {
   Modal.confirm({
    title: '是否确认删除该用户?',
    icon: createVNode(ExclamationCircleOutlined),
    onOk() {
      console.log('OK');
      delUser(value.id).then(res => {
        console.log('删除', res);
      })
    },
    onCancel() {
      console.log('Cancel');
    },
    class: 'test',
  });
}

onMounted(() => {
  getList();
});
</script>
<style scoped lang="scss">
.head {
  display: flex;
  .head-search {
    width: 200px;
    margin-right: 16px;
    margin-bottom: 24px;
  }
  .add {
    margin-left: 16px;
  }
}
.ant-link {
  color: #2daaff;
}
</style>
